<template>
  <div class="nav">
    <div class="inner">
      <h3 class="masthead-brand">
        <img 
          src="~assets/img/JonChan_light.png" 
          alt="JonChan" 
          class="img-rounded" 
          width="66px">
      </h3>
      <nav>
        <ul class="nav masthead-nav">
          <li :class="{active:activeItem==1}">
            <nuxt-link 
              :to="{name:'index'}" 
              @click.native="handleSelect(1)">Welcome!</nuxt-link>
          </li>
          <li :class="{active:activeItem==2}">
            <nuxt-link 
              :to="{name:'blog'}" 
              @click.native="handleSelect(2)">Blog</nuxt-link>
          </li>
          <li :class="{active:activeItem==3}">
            <nuxt-link 
              :to="{name:'about'}" 
              @click.native="handleSelect(3)">About</nuxt-link>
          </li>
          <li :class="{active:activeItem==4}">
            <nuxt-link 
              :to="{name:'wb'}" 
              @click.native="handleSelect(4)">微博热搜</nuxt-link>
          </li>
          <li :class="{active:activeItem==5}">
            <nuxt-link 
              :to="{name:'page0'}" 
              @click.native="handleSelect(5)">💸领红包！</nuxt-link>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      activeItem: 1
    }
  },
  methods: {
    handleSelect(val) {
      this.activeItem = val
      return true
    }
  }
}
</script>

<style lang="less" scoped>
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
.nav {
  clear: both;
  width: 100%;
  .inner {
    width: 100%;
    clear: both;
    padding: 30px;
    .masthead-brand {
      margin-top: 10px;
      margin-bottom: 10px;
      text-align: center;
      img {
        margin: 0 auto;
      }
    }
    nav {
      display: block;
      .masthead-nav {
        display: flex;
        flex-direction: row;
        padding: 0;
        li {
          margin: 0 1rem 0 1rem;
          flex: 1;
          display: inline-block;
          position: relative;
          a,
          a:visited {
            color: rgba(255, 255, 255, 0.75);
            position: relative;
            display: block;
            padding: 10px 15px;
            padding-top: 10px;
            padding-right: 0px;
            padding-bottom: 10px;
            padding-left: 0px;
            text-align: center;
            font-weight: 700;
            font-size: 16px;
          }
          a:hover {
            border-bottom: rgba(255, 255, 255, 0.75) 2px solid;
            text-decoration: none;
          }
        }
        .active {
          a {
            color: #fff !important;
            border-bottom: rgb(255, 255, 255) 2px solid;
            text-decoration: none;
          }
        }
      }
    }
  }
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
  .nav {
    .inner {
      position: relative;
      padding: 30px;
      .masthead-brand {
        float: left;
      }
      nav {
        float: right;
        .masthead-nav {
          display: block;
          width: auto;
        }
      }
    }
  }
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) {
  .nav {
    .inner {
      padding: 30px;
      .masthead-brand {
        float: left;
      }
      nav {
        float: right;
        .masthead-nav {
          display: block;
          width: auto;
        }
      }
    }
  }
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) {
  .nav {
    .inner {
      padding: 30px;
      .masthead-brand {
        float: left;
      }
      nav {
        float: right;
        .masthead-nav {
          display: block;
          width: auto;
        }
      }
    }
  }
}
</style>
